{% extends "PHPDishWebBundle::layout.html.twig" %}

{% block root %}
    <div class="book-view with-summary" data-role="book-view">
        <div class="book-summary" data-role="summary">
            <div class="book-name"><a href="{{ path('book_view', {'slug': book.slug}) }}" class="custom-link">{{ book.name }}</a></div>
            <nav role="navigation">
                <ul class="summary">
                    {% for _chapter in book.summary %}
                    <li class="chapter {% if chapter.id == _chapter.id %}active{% endif %}">
                        <span class="name">
                            {% if _chapter.children|length > 0 %}
                                <i class="fa fa-caret-down"></i>
                                {{ loop.index }}. {{ chapter.title }}
                            {% else %}
                                <i class="fa fa-file-text"></i>
                                {{ loop.index }}. <a href="{{ path('book_read', {slug: book.slug, chapterId: _chapter.id}) }}">{{ _chapter.title }}</a>
                            {% endif %}
                        </span>
                        {% if _chapter.children|length > 0 %}
                            <ul class="sub-chapter list-unstyled">
                                {% set summaryIndex = loop.index %}
                                {% for children in _chapter.children %}
                                    <li class="sub-chapter-item {% if chapter.id == children.id %}active{% endif %}" data-role="sub-chapter" data-id="{{ children.id  }}">
                                        <a href="{{ path('book_read', {'slug': book.slug, 'chapterId': children.id}) }}">
                                            <i class="fa fa-file-text"></i>  {{ summaryIndex }}.{{ loop.index }} {{ children.title }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>
        <div class="book-body" data-role="body">
            <div class="body-inner">
                <div class="book-header" role="navigation">
                    <!-- Title -->
                    <a class="btn pull-left js-toolbar-action" data-role="toggle-summary" aria-label="" href="#"><i class="fa fa-align-justify"></i></a>
                    <div data-role="social-share" class="pull-right">
                    </div>
                    <h1>
                        {#<i class="fa fa-circle-o-notch fa-spin"></i>#}
                        <a href=".">{{ chapter.title }}</a>
                    </h1>
                </div>
                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-inner">
                        <section class="normal markdown-body" id="pjax-container">
                            {% set isCanView = is_granted('IS_AUTHENTICATED_REMEMBERED') and (is_granted('edit', chapter) or book.isFollowedBy(app.user)) %}
                            {{ isCanView ? chapter.body|raw : chapter.body|html_safe_chunk(0.5)|raw}}
                        </section>
                        {% if not isCanView %}
                            <div class="payfor">
                                <div class="mask"></div>
                                <div class="action">
                                    <p class="meta"><i class="if i-tips"></i> 购买本书之后即可阅读全文</p>
                                    <button class="btn u-btn-primary" data-slug="{{ book.slug }}" data-role="buy">{{ book.chargePrice|money }} 购买</button>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <a href="" class="navigation navigation-left navigation-unique">
                <i class="fa fa-angle-left"></i>
            </a>
            <a href="" class="navigation navigation-next navigation-unique">
                <i class="fa fa-angle-right"></i>
            </a>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{{ asset('build/js/book.js') }}"></script>
    <script type="text/javascript">
        window.bookId = {{ book.id }};
    </script>
{% endblock %}